<template>
  <div class="warp" flex="dir:top box:first">
    <div>
      <div class="title">地磁/井盖</div>
      <ul class="list-thead">
        <li class="w-50">设备</li>
        <li class="w-50">状态</li>
      </ul>
    </div>

    <ul class="list" v-if="geoList.length || wellList.length">
      <li flex="dir:left" v-for="(item, index) in geoList" v-bind:key="`geo${index}`">
        <div class="w-50">{{item.equipmentName}}</div>
        <div class="w-50 c-blue" v-if="item.equipmentState == 1">畅通</div>
        <div class="w-50" v-else>阻塞</div>
      </li>
      <li flex="dir:left" v-for="(item, index) in wellList" v-bind:key="`well${index}`">
        <div class="w-50">{{item.equipmentName}}</div>
        <div class="w-50 c-blue" v-if="item.equipmentState == 1">开启</div>
        <div class="w-50 c-red" v-else>关闭</div>
      </li>
    </ul>
    <div class="list-no" v-else>暂无记录</div>
  </div>
</template>
<script>
export default {
  name: 'equipmentList',
  data: function () {
    return {
      list: [],
      geoList: [],
      wellList: [],
      value1: false,
      value2: true
    }
  },
  created: function () {
    this.initData()
  },
  methods: {
    initData: function () {
      let url = this.$base.getUrl('getList')
      let params = {
        url: url,
        data: {
          'deptId': this.$route.params.deptId,
          'moduleCode': '130'
        }
      }

      this.$store.dispatch('getForm', params).then((res) => {
        this.geoList = res.list
      })

      let wellParams = {
        url: url,
        data: {
          'deptId': this.$route.params.deptId,
          'moduleCode': '134'
        }
      }
      this.$store.dispatch('getForm', wellParams).then((res) => {
        this.wellList = res.list
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .c-blue {
    color: #50E3C2;
  }

  .c-red {
    color: #ff0000;
  }

  .text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .warp {
    .title {
      color: #fff;
      font-size: 14px;
    }
    padding: 20px 15px;
    height: 100%;
    box-sizing: border-box;
  }

  .list-thead {
    margin-top: 15px;
    overflow-x: hidden;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #50E3C2;
    letter-spacing: 0.29px;
    text-align: center;
    li {
      display: inline-block;
    }
  }

  .list {
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    text-align: center;
    color: #9FACC3;
    li {
      width: 100%;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }

  .list::-webkit-scrollbar {
    width: 0 !important
  }

  //chrome 和Safari
  .list {
    -ms-overflow-style: none;
  }

  //IE 10+
  .list {
    overflow: -moz-scrollbars-none;
  }

  .list-no {
    margin-top: 10px;
    text-align: center;
    color: #9FACC3;
  }
</style>
